<template>
  <div class="app-container">
    <el-dialog :title="formData.id ? '编辑' : '新增'" :visible.sync="dialogFormVisible">
      <el-form :model="formData" ref="formData" :rules="rules" label-width="100px">
        <el-form-item label="任务类名" prop="jobClassName">
          <el-input v-model="formData.jobClassName" placeholder="任务类名" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="参数" prop="parameter">
          <el-input v-model="formData.parameter" placeholder="参数" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="cron表达式" prop="cronExpression">
          <el-input v-model="formData.cronExpression" placeholder="cron表达式" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="formData.description" placeholder="描述" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="formData.status">
            <el-radio :label="0">正常</el-radio>
            <el-radio :label="1">停止</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('formData')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import quartzListApi from '@/api/quartz/list'
  export default {
    data () {
      return {
        formData: {
          id: '',
          jobClassName: '',
          parameter: '',
          cronExpression: '',
          description: '',
          status: 0
        },
        dialogFormVisible: false,
        rules: {
          jobClassName: [
            { required: true, message: '请填写任务类名', trigger: 'blur' }
          ],
          cronExpression: [
            { required: true, message: '请填写cron表达式', trigger: 'blur' }
          ]
        }
      }
    },
    created () {},
    methods: {
      init(id) {
        this.dialogFormVisible = true
        this.formData.id = id
        if (id) {
          this.getById()
        } else {
          this.formData = {
            id: '',
            jobClassName: '',
            parameter: '',
            cronExpression: '',
            description: '',
            status: 0
          }
        }
      },
      getById() {
        quartzListApi.listById(this.formData.id).then(res => {
          this.formData = res.data.info
          this.formData.updateTime = ''
        }).catch(res => {
          this.$message.error(res.message)
        })
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            quartzListApi.saveOrUpdate(this.formData).then(res => {
              if (res.code === 0) {
                this.$message({
                  message: res.message,
                  type: 'success'
                })
                this.dialogFormVisible = false
                this.$emit('refreshDataList')
              }
            }).catch(res => {
              this.$message.error(res.message)
            })
          } else {
            return false;
          }
        })
      }
    }
  }
</script>

<style scoped></style>